<template>
  <div class="setpasswoeld-in">
    <div class="setpasswoeld">
      <div class="setpasswoeld-title">
        <div>密码设置</div>
      </div>
      <div class="setpasswoeld-con">
        <el-form
          label-position="left"
          label-width="107px"
          class="demo-ruleForm login-container"
          :rules="rules"
          :model="from"
        >
          <el-form-item
            prop="oldpassword"
            label="输入旧密码:"
          >
            <el-input
              type="text"
              v-model="from.oldpassword"
              auto-complete="off"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="password1"
            label="输入新密码:"
          >
            <el-input
              type="password"
              v-model="from.password1"
              auto-complete="off"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="password2"
            label="确认新密码:"
          >
            <el-input
              type="password"
              v-model="from.password2"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="verifyCode"
            auto-complete="off"
            label="输入验证码："
          >
            <el-input
              type="text"
              v-model="from.verifyCode"
              placeholder="验证码"
              class="input-yzm"
            ></el-input>
            <el-image
              @click="changeImage"
              style="width: 70px; height: 25px"
              :src="url"
            ></el-image>
          </el-form-item>

        </el-form>
        <div class="setpasswoeld-btn">
          <el-button
            type="primary"
            style="width:30%;"
            @click="confirm"
          >确认</el-button>
          <el-button
            type="primary"
            style="width:30%;"
            @click="cancel"
          >取消</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class setpasswoeld extends Vue {
  public from: Object = {
    username: "",
    password: "",
    verifyCode: "",
  };
  public url: string = "http://oss3.data-bh.com/yzm.png";
  private rules: any = {
    oldpassword: [
      { required: true, message: "请输入旧密码", trigger: "blur" },
      { min: 9, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" },
    ],
    password1: [
      { required: true, message: "请输入新密码", trigger: "blur" },
      {
        min: 9,
        max: 50,
        message:
          "密码由9位数以上字符组成，包含英文字母大小写、阿拉伯数字、非字母字符",
        trigger: "blur",
      },
    ],
    password2: [
      { required: true, message: "请再次输入新密码", trigger: "blur" },
      {
        min: 9,
        max: 50,
        message:
          "密码由9位数以上字符组成，包含英文字母大小写、阿拉伯数字、非字母字符",
        trigger: "blur",
      },
    ],
    verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
  };
  public confirm() {
    this.$message({
      message: "修改成功",
      type: "success",
    });
    this.$router.push({ path: "homepage" });
  }
  public cancel() {
    this.$emit("cancel");
  }
  public changeImage() {}
}
</script>

<style lang="scss" scoped>
.setpasswoeld-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setpasswoeld {
  width: 600px;
  height: 450px;
  border: 1px solid #2342ae;
  box-shadow: 0 0 25px #0e2162;
  border-radius: 5px;
  position: relative;
  &-title {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    div {
      background: url("../../../assets/img/PopUp/left.png") left center
          no-repeat,
        url("../../../assets/img/PopUp/in.png") center no-repeat,
        url("../../../assets/img/PopUp/right.png") center right no-repeat;
      background-size: 0.3rem 0.5rem, calc(100% - 0.6rem) 0.5rem, 0.3rem 0.5rem;
      padding: 0rem 0.5rem 0.2rem;
      font-size: 24px;
    }
  }
  &-con {
    width: 65%;
    margin: auto;
  }
  &-btn {
    display: flex;
    justify-content: space-around;
  }
}
</style>
<style lang="scss">
</style>
